<template>
  <div class="dialog">
    <el-dialog :title="title" :visible.sync="visible" :close-on-click-modal="false" width="70%" top="10vh" append-to-body>
      <el-form ref="tblMain" :model="tblMain" labelPosition="right" inline="" label-suffix=":" label-width="80px">
        <el-form-item label="技师名称">
          <el-input v-model="tblMain.param.username" size="small" placeholder=""></el-input>
        </el-form-item>
        <el-form-item label="技能名称">
          <el-select v-model="tblMain.param.skillTypeId" size="small" placeholder="">
            <el-option v-for="it in skillData" :key="it.id" :label="it.skillTypeName" :value="it.id" />
          </el-select>
        </el-form-item>
        <el-form-item style="margin-left: 10px">
          <el-button type="primary" size="small" @click="initTableData()">查询</el-button>
          <el-button size="small" @click="dataReset()">清空</el-button>
        </el-form-item>
      </el-form>
      <el-table ref="tblMain" :data="tblMain.items" v-loading.body="tblMain.loading" border stripe>
        <el-table-column type="index" width="80" label="序号" align="center"></el-table-column>
        <el-table-column prop="username" label="技师名称" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column prop="skillTypeName" label="技能名称" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column prop="skillLevelName" label="技能等级" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column prop="skillPriceType" label="单价类型" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            <span v-if="scope.row.skillPriceType == '0'">时薪</span>
            <span v-else-if="scope.row.skillPriceType == '1'">件薪</span>
          </template>
        </el-table-column>
        <el-table-column prop="skillPrice" label="单价" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column prop="phonenum" label="电话号码" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column label="操作" align="center" width="100">
          <template slot-scope="scope">
            <el-button type="text" @click="handleSelect(scope.row)">选择</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination style="margin-top: 10px" :current-page.sync="tblMain.currentPage" :page-size="tblMain.pageSize"
        :total="tblMain.total" layout="total, sizes, prev, pager, next" @size-change="handleSizeChange"
        @current-change="handleCurrentChange"></el-pagination>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeNetWorker()">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { findTechnicianList, findListForSelect } from "@/api/index";
import tool from "@/tool";
export default {
  name: "UserListDialog",
  data () {
    return {
      title: "技师选择",
      visible: false,
      skillData: [],
      tblMain: tool.genTableData({
        param: {
          username: "",
          skillTypeId: ""
        },
        items: [],
      }),
    };
  },
  methods: {
    add () {
      this.visible = true;
      this.init();
      this.initTableData();
    },
    init () {
      findListForSelect({}).then((res) => {
        if (res.data.code == 0) {
          this.skillData = res.data.data;
          this.skillData.forEach((element) => {
            element.skillTypeName =
              element.skillTypeName +
              (element.skillPriceType == "0" ? "（时薪）" : "（件薪）");
          });
        }
      });
    },
    handleSelect (row) {
      this.$emit("ok", row);
      this.closeNetWorker();
    },
    closeNetWorker () {
      this.tblMain.items = [];
      this.visible = false;
    },
    handleSizeChange (val) {
      this.tblMain.pageSize = val;
      this.initTableData();
    },
    handleCurrentChange (val) {
      this.tblMain.currentPage = val;
      this.initTableData();
    },
    dataReset () {
      this.tblMain.currentPage = 1;
      this.tblMain.pageSize = 10;
      this.tblMain.param.username = "";
      this.tblMain.param.skillTypeId = "";
      this.initTableData();
    },
    initTableData () {
      let me = this;
      let param = {
        username: me.tblMain.param.username,
        skillTypeId: me.tblMain.param.skillTypeId,
        page: me.tblMain.currentPage,
        size: me.tblMain.pageSize,
      };
      me.tblMain.loading = true;
      findTechnicianList(param).then((res) => {
        me.tblMain.loading = false;
        let data = res.data;
        if (data && data.code == 0) {
          me.tblMain.items = data.data.record;
          me.tblMain.total = data.data.total;
        }
      });
    },
  },
};
</script>

<style scoped></style>
